import React, { Component } from 'react';
import './index.css';

export default class Footer extends Component {

  handleChange = (e) => {
    console.log(e.target.checked);
    this.props.checkAllTodo(e.target.checked)
  }

  handleClick = () => {
    this.props.clearTodo()
  }

  render() {

    const { todoList } = this.props;
    const total = todoList.length;
    const doneCount = todoList.reduce((prev, current) => {
      return prev + (current.done ? 1 : 0);
    }, 0)

    return (
      <div className='Footer'>
        <input type="checkbox" onChange={ this.handleChange } checked= { doneCount === total && total !== 0 ? true : false }/>
        <span>已完成{ doneCount } / 全部{ total }</span>

        <button onClick={ this.handleClick } className='btn'>清除已完成任务</button>
      </div>
    )
  }
}

